<template>
	<view class="zhezhao">
		<view class="zhezhao_content">
			<view style="height: 32rpx;"></view>
			<view style="display: flex;align-items: center;">
				<view style="width: 78rpx;"></view>
				<view class="zhezhao_content_title">
					关联客户
				</view>
				<view class="zhezhao_content_close" @click="closeZhezhao">
					<image src="../../../static/phone/close1.png" style="width: 24rpx;height: 24rpx;"></image>
				</view>
			</view>
			
			<view class="zhezhao_content_title2">
				请选择你要关联的客户：
			</view>
			
			<scroll-view style="height: 464rpx;" scroll-y="true">
				<view>
					<view v-for="(item,index) in linkList" :key="index">
						<view :class="index==tabIndex ? 'list_item_s':'list_item'" @click="clickLink(index)">
							<text style="margin-left: 32rpx;">{{item.name}}</text>
						</view>
						
					</view>
					
				</view>
				
			</scroll-view>
		
			<!-- 购买服务 -->
			<view class="zhezhao_content_bottom" v-if="tag=='buy'">
				<view class="bottom_left"  @click="addNew">
					新增客户
				</view>
				<view class="bottom_right" @click="goBuy">
					确定
				</view>
			</view>
			
			<!-- 发起咨询 -->
			<view class="zhezhao_content_bottom" v-if="tag=='launch'">
				<view class="bottom_right" @click="launchIt" style="width: 558rpx;">
					确定
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	let app = ''
	export default{
		props:{
			linkList:{
				type:Array,
				default:[]
			},
			tag:{
				type:String,
				default:''
			}
			
		},
		data(){
			return{
				tabIndex:-1
			}
		},
		onLoad() {
			// console.log('onLoad')
			
		},
		onShow() {
			// console.log('onShow')
		},
		mounted() {
			app = getApp()
		},
		methods:{
			/**
			 * 选择客户
			 */
			clickLink(index){
				this.tabIndex = index
			},
			/**
			 * 点击了关闭弹窗
			 */
			closeZhezhao(){
				this.$emit("closeLink", false)
			},
			/**
			 * 点击确定调支付
			 */
			async goBuy(){
				let _this = this
				if(_this.tabIndex===-1){
					uni.showToast({
						title:'请选择要关联的客户!',
						icon:"none"
					})
					return
				}
			
				let user = _this.linkList[_this.tabIndex]
				_this.$emit("buyIt",user)

				
			},
			/**
			 * 点击新增客户
			 */
			addNew(){
				console.log('新增')
				this.closeZhezhao()
				this.$emit("addIt")
			},
			
			launchIt(){
				let _this = this
				if(_this.tabIndex===-1){
					uni.showToast({
						title:'请选择要关联的客户!',
						icon:"none"
					})
					return
				}
							
				let user = _this.linkList[_this.tabIndex]
				_this.$emit("launchIt",user)
				_this.closeZhezhao()
			},
		}
	}
</script>

<style lang="scss">
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.zhezhao_content{
		width: 622rpx;
		height: 832rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.zhezhao_content_title{
		width: 466rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.zhezhao_content_close{
		width: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.zhezhao_content_title2{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-top: 64rpx;
		margin-left: 32rpx;
	}
	.zhezhao_content_bottom{
		display: flex;
		margin-top: 48rpx;
	}
	.bottom_left{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		margin-left: 32rpx;
	}
	.bottom_right{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: #2DA9C5;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: 32rpx;
	}
	
	.list_item_s{
		width: 558rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}
	.list_item{
		width: 558rpx;
		height: 88rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}
</style>